<template>
  <div class="main">
    <!-- 搜索区域 -->
    <el-card class="card1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <div class="tit">仓库编号</div>
          <el-input v-model="formInline.code" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <div class="tit">仓库名称</div>
          <el-input v-model="formInline.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <div class="tit">仓库状态</div>
          <el-select v-model="formInline.status" placeholder="请选择">
            <el-option label="全部" value=" " />
            <el-option label="停用" value="0" />
            <el-option label="启用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="search">搜索</el-button>
          <el-button round @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 列表区域 -->
    <el-card>
      <div class="addbtm">
        <el-button type="success" round @click="addHouse">新增仓库</el-button>
        <el-button round class="dr" @click="addHouse">导入库区信息</el-button>
        <el-button round class="xz" @click="addHouse">下载库区模板</el-button>
      </div>
      <!-- 表格 -->
      <el-table
        :data="list"
        border
        :header-cell-style="{background:'#f9f6ee'}"
        :row-style="{height:0+'px'}"
        :cell-style="{padding:0+'px'}"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="index" label="序号" width="70" align="center" />
        <el-table-column label="所属仓库" width="170" prop="warehouseName" align="center" />
        <el-table-column label="仓库编号" width="170" prop="code" align="center" />
        <el-table-column label="仓库名称" width="170" prop="name" align="center" />
        <el-table-column label="温度类型" width="170" align="center">
          <template #default="scope">
            {{ hireMap2[scope.row.temperatureType] || '未知' }}
          </template>
        </el-table-column>
        <el-table-column label="承重类型" width="170" align="center">
          <template #default="scope">
            {{ hireMap3[scope.row.bearingType] || '未知' }}
          </template>
        </el-table-column>
        <el-table-column label="用途属性" width="170" align="center">
          <template #default="scope">
            {{ hireMap4[scope.row.useType] || '未知' }}
          </template>
        </el-table-column>
        <el-table-column label="库存状态" width="170" prop="name" align="center">
          <template #default="scope">
            {{ hireMap[+scope.row.status] || '未知' }}
          </template>
        </el-table-column>

        <el-table-column label="负责人" width="170" prop="personName" align="center" />
        <el-table-column label="联系电话" width="170" prop="phone" align="center" />

        <el-table-column label="库位数量" width="170" prop="includedNum" align="center" />

        <el-table-column label="更新时间" width="170" prop="updateTime" align="center" />
        <el-table-column label="操作" width="180" fixed="right" align="center">
          <template #default="scope">
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" @click="change">停用</el-button>
            <el-button type="text" @click="del">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="params.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="params.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="+total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 仓库状态弹窗 -->
      <el-dialog
        :title="title"
        :visible="dialogVisible"
        width="30%"
      >
        <span>确定要停用： (仓库名)  吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button round @click="dialogVisible = false">取 消</el-button>
          <el-button round type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getAreaList } from '@/api'
export default {
  data() {
    return {
      dialogVisible: false,
      formInline: {
        code: '',
        name: '',
        status: ''
      },
      params: {
        current: 1,
        size: 10
      },
      hireMap: {
        0: '停用',
        1: '启用'
      },
      hireMap3: {
        ZX: '重型',
        BX: '中型',
        QX: '轻型'
      },
      hireMap2: {
        CW: '常温',
        LC: '冷藏',
        HW: '恒温'
      },
      hireMap4: {
        RKHCQ: '入库缓存区',
        CKHCQ: '出库缓存区',
        CCQ: '存储区',
        FJQ: '分拣区',
        ZJQ: '质检区'
      },
      total: '',
      pages: 10,
      input: '',
      input2: '',
      value: '',
      list: []

    }
  },
  computed: {
    // 根据仓库状态
    title() {
      return this.list.status === '0' ? '确认启用' : '确认停用'
    }
  },
  created() {
    this.fetchWhList(this.params)
  },
  methods: {
    // 8.新增仓库
    addHouse() {
      this.$router.push(`/manage-base-info/area/details/null`)
    },
    // 5. 编辑
    edit(row) {
      this.$router.push({
        path: `/manage-base-info/area/details`,
        query: {
          row
        }
      })
    },
    // 6.停用
    change() {
      this.dialogVisible = true
    },
    // 7.删除
    del() {

    },
    // 4.搜索按钮
    search() {
      this.fetchWhList(this.formInline)
      console.log(this.formInline.status)
    },
    // 3.重置按钮
    reset() {
      this.formInline = {
        code: '',
        name: '',
        status: null
      }
      this.fetchWhList(this.params)
    },
    // 1.渲染列表
    async fetchWhList(val) {
      const res = await getAreaList(val)
      console.log(res)
      this.list = res.data.records
      this.total = res.data.total
      this.pages = res.data.pages
    },
    // 列表行颜色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
      return ''
    },
    // 2.分页
    handleSizeChange(val) {
      if (this.formInline.code !== '' || this.formInline.name !== '' || this.formInline.status !== '') {
        this.params.size = val
        this.fetchWhList({ ...this.params, ...this.formInline })
      } else {
        this.params.size = val
        this.fetchWhList(this.params)
      }
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      // this.params.current = val
      if (this.formInline.code !== '' || this.formInline.name !== '' || this.formInline.status !== '') {
        this.params.current = val
        this.fetchWhList({ ...this.params, ...this.formInline })
      } else {
        this.params.current = val
        this.fetchWhList(this.params)
      }
      console.log(`当前页: ${val}`)
    }

  }
}

</script>

<style lang="scss" scoped>
.el-pagination{
  margin-left: 300px;
}
.el-form-item{
  position: relative;
  margin-right: 30px;
}
.tit {
  position: absolute;
  top:-16px;
  color: #887e7e;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  margin-top: -20px;
  height: 18px;
  width: 200px;

}
.addbtm{
  margin-left: -20px;
  margin-top:- 20px;
  .dr{
    float: right;

  }
  .xz{
    float: right;
  }
}
.main {
  min-height: calc(100vh - 50px);
  background-color: #fdfafa;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 25px;

}
.el-input {
  height: 40px;
  line-height: 40px;
  border: 1px solid #f8f5f5;
  border-radius: 6px;
  background-color:#f8f5f5;
}
.el-row {
  margin-top: -30px;
  margin-left: -20px;
}
.el-col {
  // margin-right: 20px;
  padding: 10px;

}
.btm{
  // background-color: pink;
 margin-top: 22px;
 margin-left: 22px;

}
.el-card {
  min-width: 1000px;
  // height: 127px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  padding: 30px;
  margin-bottom: 20px;
}
.card1{
  height: 127px;
}
.el-table{
  margin-top: 20px;
  // margin-left: -30px;
}
.el-table .warning-row {
    background: oldlace;
  }
</style>

